<template>
  <div class="shell">
    <header class="header">
      <h1>热议话题</h1>
      <span><svg class="icon">
        <use xlink:href="#icon-shuaxin"></use>
      </svg>换一换</span>
    </header>

    <div class="content">
      <ul>
        <li><div>荐</div>#原神，启动！！！</li>
        <li><div>荐</div>#原神，启动！！！</li>
        <li><div>荐</div>#原神，启动！！！</li>
        <li><div>荐</div>#原神，启动！！！</li>
        <li><div>荐</div>#原神，启动！！！</li>
      </ul>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
@import "@/styles/var";

.shell {
  font-size: 1rem;
  color: $color-black-text;
  background-color: #ffffff;
  padding: 2rem;
  overflow: hidden;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}
.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid #918a8a;
  span{
    font-size: 0.8rem;
    color: #918a8a;
  }
}
.content{
  ul{
    li{
      padding: 0.5rem 0 ;
      div{
        width: 1rem;
        height: 1rem;
        font-size: 0.8rem;
        background-color: #409eff;
        color: #FEFFFD;
        display: inline-block;
        margin-right: 0.2rem;
      }
    }
    li:hover{
      color: #409eff;
      cursor: pointer;
    }
  }
}
</style>